<template>
	<view class="index">
		<view class="index_title" v-if="headerIf" :style="{'paddingTop':StatusBar + 'px', 'backgroundColor': color}">
			<view class="head_text">
				<image src="../../static/index/logo.png" mode="heightFix"></image>
			</view>
			<view class="head_right">
				<text class="iconfont icon-sousuo"  @click="navigateTo('search')"></text>
				<text class="iconfont icon-wodekefu" @click="navigateTo('serve')"></text>
			</view>
		</view>
		<view :style="{'paddingTop':StatusBar + 'px', 'backgroundColor': color}" class="index_nav">
			<view class="nav_head">
				<view class="head_text"><image src="../../static/index/logo.png" mode="heightFix"></image></view>
				<view class="head_right">
					<text class="iconfont icon-sousuo"  @click="navigateTo('search')"></text>
					<text class="iconfont icon-wodekefu" @click="navigateTo('serve')"></text>
				</view>
			</view>
			<view class="nav_swiper">
				<swiper indicator-dots indicator-color="#ffffff" indicator-active-color="#FE5801" autoplay circular @change="change">
					<swiper-item class="nav_item" v-for="item in swiper_data" :key="item.id">
						<image :src="item.bg_img"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="index_body">
			<view class="body_notice">
				<view class="notice_icon">公告</view>
				<view class="notice_text">关于禁止未成年人交易的声明关于禁止未成年人交易的声明</view>
				<view class="notice_more">
					<text class="more_text">更多</text>
					<text class="iconfont icon-Right"></text>
				</view>
			</view>
			<view class="body_fun">
				<view class="fun_left">
					<view class="left_top"  @click="navigateTo('guarantee')">
						<text>中介担保</text>
						<view class="tips">与买卖家约定交易</view>
					</view>
					<view class="left_bottom">
						<view class="bottom_item" @click="navigateTo('select_game', `?url=business`)"><text>快速回收</text></view>
						<view class="bottom_item" @click="navigateTo('accountCheck')"><text>账号验证</text></view>
					</view>
				</view>
				<view class="fun_right" @click="navigateTo('salesCases')"> <text>售后案例</text> </view>
			</view>
			
			<view class="body_game">
				<view class="game_item" v-for="item in game_data" :key="item.id">
					<view class="item_image" @click="navigateTo('popularGames', `?id=${item.id}`)">
						<image :src="item.icon"></image>
					</view>
					<view class="item_text">{{item.name}}</view>
				</view>
			</view>
			
			<view class="body_message">
				<view class="message_num">
					<view class="num_head">
						<text class="head_title">昨日成交总量</text>
						<view class="head_right">
							<text class="right_num">361</text>
							<text class="right_text">单</text>
						</view>
					</view>
					<view class="num_box">
						<view class="box_item" v-for="(item, index) in 5">
							<view class="item_icon">
								<view class="icon_1" v-if="index == 0"></view>
								<view class="icon_2" v-if="index == 1"></view>
								<view class="icon_3" v-if="index == 2"></view>
								<text class="icon_num" v-if="index > 2">No.{{index +1}}</text>
							</view>
							<view class="item_name">王者荣耀</view>
							<view class="item_num" :class="index < 3 ? 'red': ''">
								<text>263</text>
								<text>单</text>
							</view>
						</view>
					</view>
					<view class="num_more" @click="navigateTo('RankingList')">
						<text class="more_text">查看更多</text>
						<text class="iconfont icon-Right"></text>
					</view>
				</view>
				<view class="message_tips">
					<view class="tips_head">
						<view class="head_box">
							<text>特色权益</text>
							<view class="box_icon"></view>
						</view>
					</view>
					<view class="tips_box">
						<view class="box_item">
							<view class="item_text" :style="{wordBreak:'break-all'}">凡是在淘气游购买包赔服务的账号，如账号被找回平台优先追回账号，账号未追回情况下，平台赔付号价130%，你的不安，我来承担。</view>
						</view>
						
					</view>
					<view class="tips_img" @click="navigateTo('ssecurityMasures')">
						<text>安全保障</text>
					</view>
				</view>
			</view>
			
			<view class="body_activity">
				<view class="activity_head">
					<view class="head_icon">活动专区</view>
					<view class="head_more" @click="navigateTo('activityZone')">
						<text class="more_text" >查看更多</text>
						<text class="iconfont icon-Right"></text>
					</view>
				</view>
				<view class="activity_box">
					<view class="box_item" v-for="item in activity_data" :key="item.id" @click="navigateTo(item.url)">
						<view class="item_btn">立即报名</view>
						<image :src="item.img" mode="scaleToFill"></image>
					</view>
				</view>
			</view>
			<view class="body_shop">
				<view class="shop_head">
					<view class="head_icon"></view>
					<text class="head_text">甄选优质店铺</text>
				</view>
				<view class="shop_box">
					<view class="box_left">
						<view class="left_item" v-for="item in shop_data" :key="item.id"  @click="navigateTo('myShop', `id=${item.id}`)">
							<view class="item_img">
								<image :src="item.img" mode="scaleToFill"></image>
							</view>
							<view class="item_content">
								<view class="content_text">{{item.name}}</view>
							</view>
							<view class="item_more">
								<text class="iconfont icon-Right"></text>
							</view>
						</view>
					</view>
					<view class="box_icon">
						<view class="icon_1">免费评估</view>
						<view class="icon_2">验号报告</view>
						<view class="icon_3">极速回收</view>
						<view class="icon_4">一对一专属客服</view>
						<view class="icon_5">找回包赔</view>
						<view class="icon_6">精准推荐</view>
					</view>
				</view>
			</view>
		</view>
		<k-tabbar />
		<!-- #ifdef H5 -->
		<!-- 下载APP -->
	<!-- 	<view class="app">
			<image src="@/static/images/log.png" mode=""></image>
			<text>安心游代售-买的放心 卖的快</text>
			<view @click="tapUrl('download')">
				下载APP
			</view>
		</view> -->
		<!-- #endif -->
	</view>
</template>

<script>
	import { swiper_list, game_list, activity_list, shop_list } from '@/api/index'
	export default {
		data() {
			return {
				headerIf: false,
				StatusBar: this.StatusBar,
				swiper_data: [],
				game_data: [],
				activity_data: [],
				shop_data: [],
				color: ""
			}
		},
		onPageScroll(e) {
			this.headerIf = e.scrollTop > 15
		},
		 onLoad() {
			this.swiper_list()
			this.game_list()
			this.activity_list()
			this.shop_list()
		},
		onShow() {
			 
			
		},
		methods: {
			
			async shop_list(){
				let data = await shop_list()
				if (data) {
					this.shop_data = data.data
				}
			},
			async swiper_list(){
				let data = await swiper_list({type: 0})
				if (data) {
					this.swiper_data = data.data
					this.color = this.swiper_data[0].color
				}
			},
			async game_list(){
				let data = await game_list()
				if (data) {
					this.game_data = data.data
				}
			},
			async activity_list(){
				let data = await activity_list()
				if (data) {
					this.activity_data = data.data
				}
			},
			
			change(e){
				let current = e.target.current
				this.color = this.swiper_data[current].color
			},
		
			game_href(row) {
				
			}
		}
	}
</script>
<style>
	page {
		background: #F7F8FA;
	}
</style>

<style lang="scss" scoped>
	
	.index {
			overflow: hidden;
			&::-webkit-scrollbar {
				display: none;
				/* Chrome Safari */
			}
			.index_title {
				width: 750rpx;
				max-width: 430px;
				height: 76rpx;
				background-color: #F7F8FA;
				position: fixed;
				top: 0;
				left: 50%;
				transform: translate(-50%, 0);
				z-index: 9999;
				box-sizing: border-box;
				padding: 0 32rpx;
				display: flex;
				align-items: center;
				.head_text {
					font-size: 32rpx;
					color: rgba(0, 0, 0, 0.6);
					font-weight: bold;
					image {
						height: 30rpx;
					}
				}
				.head_right {
					margin-left: auto;
					text {
						font-weight: bold;
						font-size: 40rpx;
						margin-left: 30rpx;
					}
				}
			}
			
			.index_nav {
				background-color: #A3CC50;
				.nav_head {
					height: 76rpx;
					box-sizing: border-box;
					padding: 0 32rpx;
					display: flex;
					align-items: center;
					.head_text {
						font-size: 32rpx;
						image {
							height: 30rpx;
						}
					}
					.head_right {
						margin-left: auto;
						text {
							font-weight: bold;
							font-size: 40rpx;
							margin-left: 30rpx;
						}
					}
				}
				.nav_swiper {
					height: 350rpx;
					uni-swiper {
						height: 100%;
						image {
							width: 100%;
							height: 100%;
						}
					}
				}
				
			}
			.index_body {
				box-sizing: border-box;
				padding: 0 32rpx;
				.body_notice {
					margin-top: 16rpx;
					height: 68rpx;
					background: #fff;
					border-radius: 12rpx;
					display: flex;
					align-items: center;
					.notice_icon {
						background-color: #FFC34F;
						width: 86rpx;
						height: 44rpx;
						border-radius: 0rpx 44rpx 44rpx 0rpx;
						font-size: 24rpx;
						color: #22150B;
						text-align: center;
						line-height: 44rpx;
					}
					.notice_text {
						max-width: 60%;
						font-size: 24rpx;
						margin-left: 24rpx;
						color: #464646;
						font-weight: bold;
						overflow:hidden;
						  white-space: nowrap;
						  text-overflow: ellipsis;
						  -o-text-overflow:ellipsis;
					}
					.notice_more {
						margin-left: auto;
						display: flex;
						align-items: center;
						margin-right: 24rpx;
						cursor: pointer;
						.more_text {
							font-size: 20rpx;
							color: #AEAEAE;
						}
						.iconfont {
							margin-left: 8rpx;
							font-size: 14rpx;
							font-weight: bold;
							color: #AEAEAE;
						}
					}
				}
				.body_fun {
					margin-top: 16rpx;
					display: flex;
					text {
						font-size: 28rpx;
						color: #22150B;
						font-weight: bold;
					}
					.fun_left {
						flex: 1;
						.left_top {
							box-sizing: border-box;
							padding: 12rpx;
							width: 388rpx;
							height: 114rpx;
							background: url(~@/static/index/zjdb.png) no-repeat;
							background-size: 100%;
							.tips {
								font-size: 24rpx;
								color: #7D7D7D;
								margin-top: 2rpx;
							}
						}
						.left_bottom {
							margin-top: 16rpx;
							height: 126rpx;
							display: flex;
							.bottom_item {
								width: 196rpx;
								height: 126rpx;
								box-sizing: border-box;
								padding: 16rpx;
								&:nth-child(1) {
									background: url(~@/static/index/kshs.png) no-repeat;
									background-size: 100%;
								}
								&:nth-child(2) {
									margin-left: 6rpx;
									background: url(~@/static/index/zhyz.png) no-repeat;
									background-size: 100%;
								}
							}
						}
					}
					.fun_right {
						box-sizing: border-box;
						padding: 26rpx;
						width: 282rpx;
						margin-left: 4rpx;
						height: 256rpx;
						background: url(~@/static/index/shal.png) no-repeat;
						background-size: 100%;
					}
				}
				
				.body_game {
					margin-top: 16rpx;
					height: 134rpx;
					background: #FFFFFF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					display: flex;
					.game_item {
						flex: 1;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						.item_image {
							width: 60rpx;
							height: 60rpx;
							border-radius: 10rpx;
							overflow: hidden;
							image {
								width: 100%;
								height: 100%;
							}
						}
						.item_text {
							margin-top: 4rpx;
							font-size: 20rpx;
							color: #3D2518;
						}
					}
				}
				
				.body_message {
					margin-top: 16rpx;
					display: flex;
					.message_num {
						width: 388rpx;
						height: 414rpx;
						background: linear-gradient(180deg, #FFFFFF 0%, #FFE78E 100%);
						border-radius: 20rpx;
						.num_head {
							box-sizing: border-box;
							padding: 16rpx 36rpx 10rpx 24rpx;
							display: flex;
							align-items: center;
							.head_title {
								font-family: PingFang SC, PingFang SC;
								font-weight: 800;
								font-size: 32rpx;
								color: #F76D4F;
								line-height: 38rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}
							.head_right {
								display: flex;
								align-items: center;
								margin-left: auto;
								.right_num {
									font-weight: 400;
									font-size: 36rpx;
									line-height: 42rpx;
									text-align: left;
									font-style: normal;
									text-transform: none;
									background: -webkit-linear-gradient(90deg, #FF1D1D, #FF902A);
									-webkit-background-clip: text;
									-webkit-text-fill-color: transparent;
									display: inline-block;
									font-style: oblique;
								}
								.right_text {
									margin-left: 2rpx;
									font-weight: 400;
									font-size: 24rpx;
									color: #000000;
									line-height: 28rpx;
									text-align: left;
									font-style: normal;
									text-transform: none;
								}
							}
						}
						
						.num_box {
							box-sizing: border-box;
							padding: 0 36rpx;
							.box_item {
								display: flex;
								align-items: center;
								margin-bottom: 16rpx;
								.item_icon {
									.icon_1 {
										margin-right: 42rpx;
										width: 42rpx;
										height: 42rpx;
										background: url(~@/static/index/icon_1.png) no-repeat;
										background-size: 100%;
									}
									.icon_2 {
										margin-right: 44rpx;
										width: 38rpx;
										height: 46rpx;
										background: url(~@/static/index/icon_2.png) no-repeat;
										background-size: 100%;
									}
									.icon_3 {
										margin-right: 44rpx;
										width: 38rpx;
										height: 39rpx;
										background: url(~@/static/index/icon_3.png) no-repeat;
										background-size: 100%;
									}
									.icon_num {
										font-size: 20rpx;
										color: #C7660D;
										font-weight: bold;
										margin-right: 38rpx;
									}
								}
								.item_name {
									font-size: 24rpx;
									font-weight: bold;
									color: #000000;
								}
								.item_num {
									margin-left: auto;
									color: #FF8B1F;
									&.red {
										color: #FF4343;
									}
									text {
										&:nth-child(1) {
											font-size: 28rpx;
											font-weight: bold;
											
										}
										&:nth-child(2) {
											line-height: 24rpx;
											font-size: 24rpx;
											
										}
									}
								}
							}
						}
						.num_more {
							display: flex;
							align-items: center;
							justify-content: center;
							color: #FF900D;
							.more_text {
								font-size: 24rpx;
							}
							.iconfont {
								font-size: 20rpx;
							}
						}
					}
					
					.message_tips {
						width: 282rpx;
						margin-left: auto;
						.tips_head {
							width: 100%;
							height: 88rpx;
							background: #473B32;
							border-radius: 20rpx;
							overflow: hidden;
							.head_box {
								margin-top: 12rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								text {
									font-style: normal;
									text-transform: none;
									background: -webkit-linear-gradient(90deg, #FFFAF6, #FFAF64);
									-webkit-background-clip: text;
									-webkit-text-fill-color: transparent;
									display: inline-block;
								}
								.box_icon {
									margin-left: 8rpx;
									width: 32rpx;
									height: 32rpx;
									background: url(~@/static/index/huanguan.png) no-repeat;
									background-size: 100%;
								}
								
							}
							
						}
						.tips_box {
							margin-top: -26rpx;
							width: 100%;
							height: 202rpx;
							background: url(~@/static/index/quanyi.png) 104rpx 28rpx  no-repeat, linear-gradient(180deg, #FFFFFF 0%, #FFE78E 100%);
							box-shadow: 0rpx -4rpx 4rpx 0rpx rgba(245,220,172,0.22);
							border-radius: 20rpx;
							z-index: 999;
							background-size: 50%;
							box-sizing: border-box;
							overflow: hidden;
							padding: 0rpx 12rpx;
							.box_item {
								display: flex;
								margin-top: 10rpx;
								.item_text {
									flex: 1;
									font-size: 22rpx;
									line-height: 30rpx;
									color: #80481A;
								}
							}
						}
						
						.tips_img {
							width: 100%;
							height: 134rpx;
							margin-top: 16rpx;
							background: url(~@/static/index/aqbz.png) no-repeat;
							background-size: 100%;
							box-sizing: border-box;
							padding: 8rpx 32rpx;
							text {
								font-weight: 800;
								font-size: 28rpx;
								color: #EA6045;
								line-height: 33rpx;
							}
						}
					}
				}
				.body_activity {
					margin-top: 16rpx;
					width: 100%;
					height: 330rpx;
					background: linear-gradient(0 , #FFFFFF 0%, #FFD4A9 100%);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					position: relative;
					box-sizing: border-box;
					padding: 0 24rpx 24rpx;
					.activity_head {
						display: flex;
						.head_icon {
							width: 288rpx;
							height: 63rpx;
							background: url(~@/static/index/hd.png) no-repeat;
							background-size: 100%;
							position: absolute;
							top: 0;
							left: 50%;
							transform: translate(-50%, 0);
							font-size: 32rpx;
							color: #975609;
							display: flex;
							align-items: center;
							justify-content: center;
						}
						.head_more {
							margin-left: auto;
							padding: 12rpx 0 24rpx;
							.more_text {
								font-size: 20rpx;
								color: #432A05;
							}
							.iconfont {
								margin-left: 8rpx;
								font-size: 14rpx;
								font-weight: bold;
								color: #432A05;
							}
						}
					}
					.activity_box {
						display: inline-block;
						.box_item {
							position: relative;
							float: left;
							box-sizing: border-box;
							width: 312rpx;
							height: 230rpx;
							border-radius: 20rpx;
							border: 8rpx solid #FFE78F;
							overflow: hidden;
							image {
								width: 100%;
							}
							&:nth-child(2n) {
								margin-left: 14rpx;
							}
							.item_btn {
								position: absolute;
								top: 20rpx;
								right: 20rpx;
								width: 140rpx;
								height: 48rpx;
								box-sizing: border-box;
								border: 4rpx solid #FFB98F;
								background: linear-gradient( 95deg, #FC9D55 0%, #FC5B68 47%, #F26CB0 100%);
								box-shadow: inset 4rpx 4rpx 4rpx 0rpx rgba(255,109,47,0.44);
								border-radius:40rpx;
								font-size: 24rpx;
								color: #FFFFFF;
								display: flex;
								align-items: center;
								justify-content: center;
								z-index: 9;
							}
						}
					}
				}
				
				.body_shop {
					margin-top: 16rpx;
					height: 570rpx;
					background: #FFE78F;
					box-shadow: 0rpx -4rpx 4rpx 0rpx rgba(245,220,172,0.22);
					border-radius: 64rpx 64rpx 20rpx 20rpx;
					margin-bottom: 186rpx;
					.shop_head {
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 14rpx 0;
						.head_icon {
							width: 36rpx;
							height: 36rpx;
							background: url(~@/static/index/shop.png) no-repeat;
							background-size: 100%;
							margin-right: 8rpx;
						}
						.head_text {
							font-size: 32rpx;
							color: #CC6F00;
						}
					}
					.shop_box { 
						margin: 0 16rpx;
						height: 478rpx;
						background: linear-gradient( 180deg, #FFFFFF 0%, #FFF5EE 0%, rgba(251,241,255,0.72) 100%);
						box-shadow: inset 4rpx 4rpx 4rpx 0rpx rgba(255,255,255,0.34), inset 0rpx -4rpx 8rpx 0rpx rgba(255,255,255,0.25), 0rpx 4rpx 4rpx 0rpx rgba(229,138,2,0.25);
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						box-sizing: border-box;
						padding: 24rpx 16rpx;
						display: flex;
						.box_left {
							width: 365rpx;
							margin-top: 4rpx;
							.left_item {
								background: #fff;
								display: flex;
								align-items: center;
								box-sizing: border-box;
								padding: 0 20rpx;
								height: 130rpx;
								border-radius: 20rpx;
								margin-bottom: 20rpx;
								.item_img {
									width: 64rpx;
									height: 64rpx;
									border-radius: 50%;
									overflow: hidden;
									image {
										width: 100%;
										height: 100%;
									}
									margin-right: 16rpx;
								}
								
								.item_content {
									.content_text {
										font-size: 28rpx;
										font-weight: bold;
										color: #FF705C;
									}
									.content_icon {
										padding: 4rpx 10rpx;
										border-radius: 44rpx;
										background: linear-gradient( 96deg, #FF715D 0%, #FFAB6E 100%);
										font-size: 20rpx;
										color: #fff;
										display: flex;
										align-items: center;
										justify-content: center;
									}
								}
							}
							.item_more {
								margin-left: auto;
								width: 28rpx;
								height: 28rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								background: #FFF0CB;
								border-radius: 50%;
								.iconfont {
									font-size: 20rpx;
									color: #FF8B02;
								}
							}
						}
						
						.box_icon {
							background: #fff;
							border-radius: 20rpx 20rpx 20rpx 20rpx;
							box-sizing: border-box;
							width: 238rpx;
							margin-left: auto;
							.icon_1 {
								width: 174rpx;
								height: 64rpx;
								margin: 12rpx 0 0 16rpx;
								background: url(~@/static/index/mfpg.png) no-repeat;
								background-size: 100%;
								font-size: 20rpx;
								color: #FF6E1D;
								display: flex;
								align-items: center;
								padding-left: 20rpx;
								box-sizing: border-box;
								font-weight: bold;
							}
							.icon_2 {
								width: 174rpx;
								height: 64rpx;
								margin: 6rpx 0 0 48rpx;
								background: url(~@/static/index/yhbg.png) no-repeat;
								background-size: 100%;
								font-size: 20rpx;
								color: #FF6E1D;
								display: flex;
								align-items: center;
								padding-left: 20rpx;
								box-sizing: border-box;
								font-weight: bold;
							}
							.icon_3 {
								width: 174rpx;
								height: 64rpx;
								margin: 6rpx 0 0 16rpx;
								background: url(~@/static/index/mfpg.png) no-repeat;
								background-size: 100%;
								font-size: 20rpx;
								color: #FF6E1D;
								display: flex;
								align-items: center;
								padding-left: 20rpx;
								box-sizing: border-box;
								font-weight: bold;
							}
							.icon_4 {
								width: 216rpx;
								height: 64rpx;
								margin: 6rpx 0 0 12rpx;
								background: url(~@/static/index/ydy.png) no-repeat;
								background-size: 100%;
								font-size: 20rpx;
								color: #FF6E1D;
								display: flex;
								align-items: center;
								padding-left: 12rpx;
								box-sizing: border-box;
								font-weight: bold;
							}
							.icon_5 {
								width: 174rpx;
								height: 64rpx;
								margin: 6rpx 0 0 16rpx;
								background: url(~@/static/index/mfpg.png) no-repeat;
								background-size: 100%;
								font-size: 20rpx;
								color: #FF6E1D;
								display: flex;
								align-items: center;
								padding-left: 20rpx;
								box-sizing: border-box;
								font-weight: bold;
							}
							.icon_6 {
								width: 174rpx;
								height: 64rpx;
								margin: 6rpx 0 0 48rpx;
								background: url(~@/static/index/jztj.png) no-repeat;
								background-size: 100%;
								font-size: 20rpx;
								color: #FF6E1D;
								display: flex;
								align-items: center;
								padding-left: 20rpx;
								box-sizing: border-box;
								font-weight: bold;
							}
						}
					}
				}
			}
			
	
	}

</style>
